import React, { Component } from 'react';
import { Checkbox, Row, Col, Form, message } from "antd";
import styles from './sign.css';

const FormItem = Form.Item;

export default class Sign extends Component {
    constructor(props) {
        super();
        this.state = {
            checkAgree: false,
            required: false,
            hasCheck: 0

        }
    }
    onChange = (e) => {
        console.log('checked = ', e.target.checked);
        if (e.target.checked) {
            this.setState({
                hasCheck: this.state.hasCheck + 1,
                required: true
            });
        } else {
            this.setState({ hasCheck: this.state.hasCheck - 1 });
            if (this.state.hasCheck === 1) {
                this.setState({ required: false });
            }
        }
    }

    handleSubmitSign = (msg) => {
        if (this.state.required) {
            this.props.form.validateFields(
                (err, value) => {
                    if (!err) {
                        console.log('Received values of form: ', value);
                        if (this.state.checkAgree) {
                            msg = {
                                flag: true,
                                valueData: value
                            }
                        } else {
                            msg = {
                                flag: false,
                                valueData: value
                            }
                        }

                        this.props.transferMsg(msg);
                    }
                }
            )
        } else {
            message.warning('请至少选择一个选项!');
            return false;
        }

    }
    check = (e) => {
        this.setState({
            checkAgree: e.target.checked
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className={styles.container}>
                <Form onSubmit={this.handleSubmitSign} className={styles.from}>
                    <Row>
                        <Col span={16}>
                            <FormItem className={styles.fromItem}>
                                {getFieldDecorator('YXT', {
                                    valuePropName: 'checked',
                                    initialValue: false,
                                })(
                                    <Checkbox onChange={this.onChange}>银信通</Checkbox>
                                )}
                            </FormItem>
                            <FormItem className={styles.fromItem}>
                                {getFieldDecorator('ATM', {
                                    valuePropName: 'checked',
                                    initialValue: false,
                                })(
                                    <Checkbox onChange={this.onChange}>ATM自动转账开通</Checkbox>
                                )}
                            </FormItem>
                            <FormItem className={styles.fromItem}>
                                {getFieldDecorator('mobileBank', {
                                    valuePropName: 'checked',
                                    initialValue: false,
                                })(
                                    <Checkbox onChange={this.onChange}>手机银行</Checkbox>
                                )}
                            </FormItem>
                            <FormItem className={styles.fromItem}>
                                {getFieldDecorator('webBank', {
                                    valuePropName: 'checked',
                                    initialValue: false,
                                })(
                                    <Checkbox onChange={this.onChange}>网上银行</Checkbox>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <div className={styles.divItem}>签约协议</div>
                            <div className={styles.divItem}>签约协议</div>
                            <div className={styles.divItem}>签约协议</div>
                            <div className={styles.divItem}>签约协议</div>
                        </Col>
                    </Row>
                </Form>
                <Row className={styles.checkItem}>
                    <Col span={24}>
                        <Checkbox onChange={this.check}>本人已阅读以上签约协议，并同意照此办理。</Checkbox>
                    </Col>
                </Row>
            </div>
        )
    }
}
Sign = Form.create({})(Sign);

